<template>
<!-- 物料管理 -->
  <div class="MaterialManagement">
    <div class="search">
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="输入搜索">
          <el-input v-model="search.key" placeholder="请输入设备名称"></el-input>
        </el-form-item>
        <el-form-item label="输入时间">
          <el-date-picker
            v-model="search.time"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="chage"
          ></el-date-picker>
        </el-form-item>
        <el-form-item><el-button type="primary" @click="onsubmit">查询</el-button></el-form-item>
      </el-form>
      <el-button class="ebtn" type="warning" @click="GotoPg(null,null)">新增物料</el-button>
    </div>
    <div class="table-box">
      <template>
        <el-table :data="ListData" stripe style="margin: 10px 20px;width: calc( 100% - 40px)" :height="autoHeightTable" show-overflow-tooltip>
          <el-table-column prop="xuhao" type="index" label="序号" width="100" align="center"></el-table-column>
          <el-table-column prop="" label="物料图片"  align="center">
            <template v-slot="scope">
              <el-popover placement="right" trigger="hover">
                <el-image slot="reference" :src="scope.row.picture" :alt="scope.row.picture" style="max-height: 30px;max-width: 30px"></el-image>
                <el-image :src="scope.row.picture"></el-image>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="物料名称"  align="center"></el-table-column>
          <el-table-column prop="cate" label="物料类型" align="center"></el-table-column>
          <el-table-column prop="jianhao" label="件号"  align="center"></el-table-column>
          <el-table-column prop="CreateOn" label="创建时间" align="center"></el-table-column>
          <el-table-column label="操作" width="300" align="center">
            <template v-slot="scope">
              <el-button size="small" type="warning" @click="GotoPg(scope.row.Id,null)">编辑</el-button>
              <el-button type="primary" size="small" @click="GotoPg(scope.row.Id,1)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <template>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="current"
        :page-size="pagesize"
        @current-change="handleCurrentChange">
      </el-pagination>
    </template>
  </div>
</template>
<script>
import axios from "axios";
export default {
components: {},
  computed: {
    autoHeightTable () { return document.documentElement.scrollHeight - 251 -78 }
  },
  data() {
    return {
      search:{ key: "",start:"",end:"" },
      ListData:[],
      total: 1,
      current: 1,
      pagesize: 10,
    };
  },
   created() {
     this.LoadCount()
     this.LoadContents()
  },
  methods:{
    handleCurrentChange(e) {
      this.current=e;
      this.LoadContents();
    },
    LoadCount(){
      let jsondata={
        pn:0,
        PerPageSize:0,
        key: this.search.key,
        start: this.search.start,
        end: this.search.end,
      }
      let jsondata_str=JSON.stringify(jsondata)
      axios("/apis/ScProductManage.asmx/LoadCount?index=" + 1 + "&jsondata=" + jsondata_str).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var result = JSON.parse(datas.int.__text);
        this.total =result;
      });
    },
    LoadContents(){
      let jsondata={
        pn:this.current-1,
        PerPageSize:this.pagesize,
        key: this.search.key,
        start: this.search.start,
        end: this.search.end,
      }
      let jsondata_str=JSON.stringify(jsondata)
      console.log(jsondata_str)
      axios("/apis/ScProductManage.asmx/LoadContents?index=" + 1 + "&jsondata=" + jsondata_str).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var result = JSON.parse(datas.string.__text);
        this.ListData=result;
        console.log(result)
      });
    },
    onsubmit() {
      this.LoadCount()
      this.LoadContents()
    },

    chage(e) {
      if (e) {
        this.search.start=e[0]
        this.search.end=e[1]
      } else {
        this.search.start=''
        this.search.end=''
      }
    },
    GotoPg(id,edit) { this.$router.push({path: "./AddMaterial", query: { id: id,edit:edit }});  },
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.MaterialManagement .search{height: 50px;border-radius: 5px;background-color: #fff;padding-left: 20px;padding-top: 10px; margin:0 20px 20px;}
.MaterialManagement .demo-form-inline {display: inline-block;}
.MaterialManagement .el-pagination {margin-top: 15px;text-align: center;}
.MaterialManagement .ebtn {float: right;margin-right: 20px;}
</style>
